<template>
  <card>
    <template #header>
      <ExtendedFieldSettingButton @add="addEvent" />
    </template>
    <template #filter>
      <ExtendedFieldSettingSearch
        ref="search"
        @search="searchEvent"
      />
    </template>
    <ExtendedFieldSettingTableArea
      ref="table"
      @edit="editEvent"
      @detail="detailEvent"
    />
    <ExtendedFieldSettingDialog
      ref="dialog"
      @refresh="refreshEvent"
    />
  </card>
</template>

<script>
import ExtendedFieldSettingButton from './components/ExtendedFieldSettingButton'
import ExtendedFieldSettingDialog from './components/ExtendedFieldSettingDialog'
import ExtendedFieldSettingSearch from './components/ExtendedFieldSettingSearch'
import ExtendedFieldSettingTableArea from './components/ExtendedFieldSettingTableArea'
export default {
  name: 'ExtendedFieldSetting',
  components: { ExtendedFieldSettingButton, ExtendedFieldSettingDialog, ExtendedFieldSettingSearch, ExtendedFieldSettingTableArea },
  methods: {
    // 搜索
    searchEvent(val) {
      this.$refs.table.searchForm = val
      this.$refs.table.queryListByPage('search')
    },
    // 新增
    addEvent() {
      this.$refs.dialog.pageType = 'add'
      this.$refs.dialog.openDialog()
    },
    // 编辑
    editEvent(id) {
      this.$refs.dialog.pageType = 'edit'
      this.$refs.dialog.editDialog(id)
    },
    // 查看
    detailEvent(id) {
      this.$refs.dialog.pageType = 'detail'
      this.$refs.dialog.editDialog(id)
    },
    // 刷新
    refreshEvent() {
      this.$refs.table.queryListByPage()
    }
  }
}
</script>

<style scoped>

</style>
